{include file='public:header-css'/}
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div class="lyear-layout-sidebar-scroll"></div>
        <!--End 左侧导航-->
        <!--页面主要内容-->
        <div class="">
            <div class="row">
                <div class="col-lg-12">
                    <form id="form" class="card">
                        <div class="card-toolbar">
                            <div class="toolbar-btn-action">
                                <a class="btn btn-label btn-theme" onclick="add_spec()"><label><i
                                        class="mdi mdi-checkbox-marked-circle-outline"></i></label> 新增规格</a>
                            </div>
                            <div class="table-form">
                                <div class="table-form-group">
                                    <input type="text" value="{$goods_type.name}" name="name"
                                           placeholder="输入模型名称">
                                    <input type="hidden" name="id" value="{$goods_type.id}">
                                    <button class="btn btn-default" id="submit" type="button">确定提交</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered table-striped table-hover">
                                <thead>
                                <tr>
                                    <th>操作</th>
                                    <th>规格名称</th>
                                    <th>排序</th>
                                    <th>可上传规格图</th>
                                    <th>规格值</th>
                                </tr>
                                </thead>
                                <tbody id="spec_list">
                                {volist name="goods_type.spec" id="goods_type_spec" key="spec_key"}
                                <tr data-index="{$spec_key-1}">
                                    <input name="spec[{$spec_key-1}][id]" type="hidden" value="{$goods_type_spec.id}">
                                    <td><a class="table-btn btn-danger delete_spec" data-id="{$goods_type_spec.id}"><i class="mdi mdi-delete"></i>删除</a></td>
                                    <td><input type="text" class="table-input" name="spec[{$spec_key-1}][name]" value="{$goods_type_spec.name}"></td>
                                    <td><input type="text" class="table-input" name="spec[{$spec_key-1}][sort]" value="{$goods_type_spec.sort}" onKeyUp="this.value=this.value.replace(/[^\d.]/g,'')"></td>
                                    <td>
                                        <input type="hidden" name="spec[{$spec_key-1}][is_upload_image]" value="{$goods_type_spec.is_upload_image}">
                                        {if $goods_type_spec.is_upload_image==1}
                                        <span class="is_upload_image mdi text-success mdi-checkbox-marked-circle-outline"> 是</span>
                                        {else/}
                                        <span class="is_upload_image mdi text-red mdi-close-circle-outline"> 否</span>
                                        {/if}
                                    </td>
                                    <td>
                                        {volist name="goods_type_spec.spec_item" id="spec_item" key="spec_item_key"}
                                        <div class="spec_item_div spec_item_div_add">
                                            <input type="text" class="table-input spec_item_name" name="spec[{$spec_key-1}][item][{$spec_item_key-1}][item]" value="{$spec_item.item}">
                                            <input type="hidden" name="spec[{$spec_key-1}][item][{$spec_item_key-1}][id]" value="{$spec_item.id}">
                                            <span class="delete_spec_item mdi mdi-close" data-id="{$spec_item.id}"></span>
                                        </div>
                                        {/volist}
                                        <div class="spec_item_div spec_item_div_input">
                                            <input type="text" class="table-input spec_item_name">
                                        </div>
                                        <a class="table-btn btn-theme add_spec_item"><i class="mdi mdi-plus-circle"></i>添加</a>
                                    </td>
                                </tr>
                                {/volist}
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--End 页面主要内容-->
    </div>
</div>
<style>
    .table-input{
        max-width: 100%;
    }
    .spec_item_div{
        display: inline-block;
        position: relative;
    }
    .delete_spec_item{
        position: absolute;
        left: -9px;
        top: -9px;
        width: 18px;
        height: 18px;
        line-height: 16px;
        border: 1px solid var(--border);
        border-radius: 50%;
        text-align: center;
        background-color: #fff;
        font-size: 12px;
        box-sizing: border-box;
    }
    .spec_item_name{
        width: 70px;
    }
</style>
<script type="text/javascript">
    //往table中添加规格
    function add_spec(){
        var spec_list = $('#spec_list');
        var spec_length = spec_list.find('tr').length;
        if(spec_length >= 4){
            showErrorMsg('规格最多可添加4个');
            return;
        }
        var item='<tr data-index='+spec_length+'>' +
            '<td><a class="table-btn btn-danger delete_spec"><i class="mdi mdi-delete"></i>删除</a>' +
            '</td>' +
            '<td><input name="spec['+spec_length+'][name]" type="text" class="table-input"></td>' +
            '<td><input name="spec['+spec_length+'][sort]" type="text" class="table-input" onKeyUp="this.value=this.value.replace(/[^\\d.]/g,\'\')"></td>' +
            '<td><input type="hidden" name="spec['+spec_length+'][is_upload_image]" value=""><span class="is_upload_image mdi text-red mdi-close-circle-outline"> 否</span></td>' +
            '<td><div class="spec_item_div spec_item_div_input"><input type="text" class="table-input spec_item_name"></div> <a class="table-btn btn-theme add_spec_item"><i class="mdi mdi-plus-circle"></i>添加</a></td>' +
            '</tr>';
        spec_list.append(item);
    }
    //删除规格
    $(document).on('click', '.delete_spec', function () {
        var obj = $(this);
        if (obj.data('id') > 0) {
            showConfirm("确认删除已存在的规格吗？",function () {
                $.ajax({
                    type: "POST",
                    url: "{:url('Goods/deleteSpec')}",
                    data: {id: obj.data('id')},
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 1) {
                            obj.parent().parent().remove();
                        } else {
                            showErrorMsg(data.msg);
                        }
                    }
                });
            });
        } else {
            obj.parent().parent().remove();
        }
    });
    //删除规格值
    $(document).on('click', '.delete_spec_item', function () {
        var obj = $(this);
        if (obj.data('id') > 0) {
            showConfirm("确认删除已存在的规格值吗？",function () {
                $.ajax({
                    type: "POST",
                    url: "{:url('Goods/deleteSpecItem')}",
                    data: {id: obj.data('id')},
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 1) {
                            obj.parent().remove();
                        } else {
                            showErrorMsg(data.msg);
                        }
                    }
                });
            });
        } else {
            obj.parent().remove();
        }
    });
    //添加规格值
    $(document).on('click', '.add_spec_item', function () {
        var spec_item_name = $(this).parent().find(".spec_item_div_input .spec_item_name").val();
        if ($.trim(spec_item_name) == ''){
            showErrorMsg('规格值名称不能为空');
            return;
        }
        var spec_item_length = $(this).parent().find('.spec_item_div_add').length;
        if(spec_item_length >= 15){
            showErrorMsg('规格值最多可添加15个');
            return;
        }
        var spec_index = $(this).parents('tr').data('index');
        var item='<div class="spec_item_div spec_item_div_add">' +
            '<input name="spec['+spec_index+'][item]['+spec_item_length+'][item]" value="'+spec_item_name+'" type="text" class="table-input spec_item_name">' +
            '<span class="delete_spec_item mdi mdi-close"></span>' +
            '</div>';
        $(this).parent().find(".spec_item_div_input .spec_item_name").val('');
        $(this).parent().find(".spec_item_div_input").before(item);
    });
    $(document).on('click', '#submit', function () {
        var w70 = $('.spec_item_div_add .spec_item_name').serializeArray();
        for(var i=0;i<w70.length;i++){
            if (!w70[i]['value']) {
                showErrorMsg('规格值不能为空');
                return;
            }
        }
        $.ajax({
            type: "POST",
            url: "{:url('Goods/saveType')}",
            data: $('#form').serialize(),
            dataType: "json",
            success: function (data) {
                if(data.code == 1){
                    window.parent.save_type_call_back(data.type_id);
                }else{
                    showErrorMsg(data.msg);
                }
            }
        });
    });
    //是否上传规格图
    $(document).on('click', '.is_upload_image', function () {
        if ($(this).hasClass('text-success')) {
            var is_upload_image = 0;
            var add = 'text-red mdi-close-circle-outline';
            var remove = 'text-success mdi-checkbox-marked-circle-outline';
            var text = ' 否';
        } else {
            var is_upload_image = 1;
            var add = 'text-success mdi-checkbox-marked-circle-outline';
            var remove = 'text-red mdi-close-circle-outline';
            var text = ' 是';
        }
        $(this).removeClass(remove).addClass(add).text(text);
        $(this).parent().find('input').val(is_upload_image);
    });
</script>
</body>
</html>
